<template>
  <div>
    <div class="header">
      <div class="login">
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            {{ this.userStore.user.name ?? '用户昵称'}}
            <el-icon>
              <ArrowDown />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logoutHandler">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="photo"></div>
    </div>
    <el-container class="container">
      <el-aside class="left" width="200px">
        <!-- <h1>妙缘轩后台管理</h1> -->
        <img>
        <el-menu :default-active="activeName">
          <template v-for="(item, index) in routes[0].children.filter(item => !item.hidden)" :key="index">
            <el-menu-item :index="item.name" @click="naviTo(item.name)">
              <span>
                {{ item.meta.title }}
              </span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <querenDialog v-model="dialogVisible" :dialogVisibled="dialogVisible" @delAllHandler="logoutedHandler"
      @dialogCancelHandler="dialogHandler"></querenDialog>
      <div class="nav">
        <ul v-if="arr" @click="clickHandler($event)">
          <li v-for="(item, index) in arr" :key="index" @click="naviTo(item.name)">
            {{ item.meta.title }}
          </li>
        </ul>
      </div>
      <el-main class="view">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
  
<script>
import useUserStore from '@/store/common'
import querenDialog from '../components/querenDialog.vue'
export default {
  components: {
    querenDialog
  },
  async created() {
    this.routes = this.$router.options.routes.filter(item => !item.hidden)
    this.getActiveName()
  },
  data() {
    return {
      routes: [],
      activeName: '',
      arr: [],
      prev: [],
      userStore:useUserStore(),
      dialogVisible: false
    }
  },
  methods: {
    getActiveName() {
      let routes = this.$router.options.routes[0].children
      let hash = window.location.hash.slice(2)
      if (!hash.includes('/')) {
        this.arr.length = 0
        this.$router.push({name})
        for (let i = 0; i < routes.length; i++) {
          if (routes[i].path == hash && routes[i].name!='index') {
            this.$router.push({
              name: routes[i].children[0].name
            })
          }
        }   //跳转第一个孩子路由
      }
      for (let i = 0; i < routes.length; i++) {
        if (routes[i].path == hash) {
          this.activeName = routes[i].name
          if (routes[i].children) {
            routes[i].children.forEach(item => this.arr.push(item))
            this.prev[0] = routes[i].children[0].meta.title
          }
          return
        }
      }
    },
    naviTo(name) {
      this.$router.push({
        name
      })
    },
    clickHandler(e) {
      this.prev.length = 0
      this.prev[this.prev.length] = e.target.innerText
    },
    logoutedHandler() {
      this.dialogVisible = false
      const userStore = useUserStore()
      userStore.setUser({})
      window.location.href = '/login'
    },
    dialogHandler() {
      this.dialogVisible = false;
    },
    logoutHandler() {
      console.log(111)
      this.dialogVisible=true
    }
  },
  watch: {
    '$route'() {
      this.getActiveName();
      if (document.querySelector('.nav')) {
        let navs = document.querySelector('.nav')
        setTimeout(() => {
          let lis = navs.querySelectorAll('li');
          lis.forEach(item =>
            item.innerText == this.prev[0] ? item.style.background = '#C9DAFF' :
              item.style.background = 'transparent'
          )
        })
      }
    }
  }
}
</script>
  
<style lang="scss">
body {
  padding: 0;
  margin: 0;
  background-color: #fff;
  color: #000;
}

ul {
  list-style: none;
}

a {
  color: #000;
  text-decoration: none;
}

.header {
  width: 100%;
  height: 64px;


  .login {
    width: 200px;
    height: 64px;
    float: right;
  }

  .photo {
    width: 48px;
    height: 48px;
    background: url(../../public/avatar.jpg);
    background-size: 100%;
    margin-top: 8px;
    border-radius: 50%;
    margin-right: 20px;
    float: right;
    cursor: pointer;
  }
}

.container {
  background-color: rgb(242, 246, 255);
  position: relative;

  .nav {
    position: absolute;
    top: 20px;
    left: calc(15% + 20px);
    height: 45px;
    width: 83.7%;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;

    ul {
      padding: 0;
      margin: 0;

      li {
        height: 45px;
        width: 126px;
        border-radius: 6px;
        float: left;
        line-height: 45px;
        text-align: center;
        display: block;
      }
    }
  }

  .view {
    position: absolute;
    top: 85px;
    left: 0px;
    width: 100vw;
    height: 79.2vh;
    background-color: #F2F6FF;
    position: relative;
    border-radius: 3px;
    margin:0 20px;
    padding-bottom: 20px !important;
  }

  .left {
    width: 15%;
    height: 91vh;
    padding-top: 50px;
    background-color: #fff;

    .el-menu {
      border: none;
    }

    .el-menu-item {
      color: rgb(74, 74, 74);
      width: 155px;
      margin: 0 auto;
      margin-bottom: 30px;
      height: 50px;
      border: none;
      text-align: center;
      line-height: 50px;
      display: block;
      border-radius: 8px;
      font-size: 16px;
    }
  }
}

.container .el-aside .el-menu-item.is-active {
  background-color: #C9daff;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  line-height: 64px;
  font-size: 17px;
  align-items: center;
  outline: none;

  .el-icon {
    margin-left: 6px;
  }
}
</style>